<!--提货卡兑换（领取）记录-->
<template>
  <div>
    <Card :bordered="false" dis-hover class="mt15 ivu-mt" :padding="0">
      <div class="new_card_pd">
        <Form ref="tableFrom" inline
              :model="tableFrom" :label-width="labelWidth"
              :label-position="labelPosition" @submit.native.prevent>
          <FormItem label="卡序列号">
            <Input v-model="tableFrom.card_serial" placeholder="请输入卡序列号" style="width: 250px;margin-right:14px"/>
          </FormItem>
          <FormItem label="卡编号">
            <Input v-model="tableFrom.card_no" placeholder="请输入卡编号" style="width: 250px;margin-right:14px"/>
          </FormItem>
          <FormItem label="购买单位名称">
            <Input v-model="tableFrom.use_company" placeholder="请输入购买单位名称" style="width: 250px;margin-right:14px"/>
          </FormItem>
          <FormItem label="提货卡名称" label-for="coupon_title">
            <Input v-model="tableFrom.title" placeholder="请输入提货卡名称" @on-search="userSearchs"
                   style="width: 250px;margin-right:14px"/>
            <Button type="primary" @click="orderSearch()" style="margin-right:14px">查询</Button>
          </FormItem>
        </Form>
      </div>
    </Card>
    <Card :bordered="false" dis-hover class="ivu-mt">
      <Button v-auth="['admin-user-recharcard-create']" style="margin-left:20px;" type="primary" @click="exportList" >下载导出</Button>
      <Table :columns="columns1" :data="tableList" ref="table" class="ivu-mt"
             :loading="loading" highlight-row
             no-userFrom-text="暂无数据"
             no-filtered-userFrom-text="暂无筛选结果">
        <template slot-scope="{ row }" slot="recharcard_title">
          <span>{{row.recharcard_title}}</span>
        </template>
        <template slot-scope="{ row }" slot="use_company">
          <span>{{row.use_company}}</span>
        </template>
        <template slot-scope="{ row }" slot="card_no">
          <span>{{row.card_no}}</span>
        </template>
        <template slot-scope="{ row }" slot="card_serial">
          <span>{{row.card_serial}}</span>
        </template>
        <template slot-scope="{ row }" slot="user_name">
          <span>{{row.user_name ? row.user_name : row.user.nickname}}</span>
        </template>
        <template slot-scope="{ row }" slot="user">
          <span>{{row.user.phone}}</span>
        </template>
        <template slot-scope="{ row }" slot="recharcard_money">
          <span>{{row.recharcard_money}}元</span>
        </template>
        <template slot-scope="{ row }" slot="start_use_time">
          <span>{{row.start_use_time + '-' + row.end_use_time}}</span>
        </template>
        <template slot-scope="{ row }" slot="receive_time">
          <span>{{row.receive_time}}</span>
        </template>
        <template slot-scope="{ row }" slot="status">
          <span>{{row.status == 0 ? '未使用' : ''}}{{row.status == 1 ? '已使用' : ''}}{{row.status == -1 ? '已过期' : ''}}</span>
        </template>
      </Table>
      <div class="acea-row row-right page">
        <Page :total="total" :current="tableFrom.page" show-elevator show-total @on-change="pageChange"
              :page-size="tableFrom.limit"/>
      </div>
    </Card>

  </div>
</template>

<script>
import {receiveLst,storeRecharcardReceive} from '@/api/user.js'
import exportExcel from "@/utils/newToExcel.js";
import {mapState} from "vuex";
export default {
  name: "list.vue",
  data() {
    return {
      modals2: false,
      grid: {
        xl: 7,
        lg: 7,
        md: 12,
        sm: 24,
        xs: 24
      },
      total:0,
      loading: false,
      columns1: [
        {
          title: "卡号ID",
          key: "id",
          width: 70,
          align:'center'
        },
        {
          title: "用户ID",
          key: "uid",
          width: 60,
          align:'center'
        },
        {
          title: "名称",
          slot: "recharcard_title",
          minWidth: 180,
          align:'center'
        },
        {
          title: "生成单位名称",
          slot: "use_company",
          minWidth: 120,
          align:'center'
        },
        {
          title: "卡编号",
          slot: "card_no",
          minWidth: 140,
          align:'center'
        },
        {
          title: "序列号",
          slot: "card_serial",
          minWidth: 140,
          align:'center'
        },
        {
          title: "使用者名称",
          slot: "user_name",
          align:'center',
          minWidth: 160
        },
        {
          title: "使用者手机号",
          slot: "user",
          align:'center',
          minWidth: 160
        },
        {
          title: "提货卡状态",
          slot: "status",
          align:'center',
          minWidth: 100
        },
        {
          title: "金额",
          slot: "recharcard_money",
          align:'center',
          minWidth: 140
        },
        {
          title: "有效时间",
          slot: "start_use_time",
          align:'center',
          minWidth: 140
        },
        {
          title: "领取时间",
          slot: "receive_time",
          align:'center',
          minWidth: 160
        }

      ],
      tableFrom: {
        card_serial:'',
        card_no:'',
        use_company:'',
        title:'',
        page: 1,
        limit: 15
      },
      tableList:[]
    };
  },
  created(){
    console.log('change22222222')
    this.receiveLst()
  },
  computed: {
    ...mapState("admin/layout", ["isMobile"]),
    labelWidth() {
      return this.isMobile ? undefined : 96;
    },
    labelPosition() {
      return this.isMobile ? "top" : "right";
    }
  },
  methods:{
    orderSearch(){
      this.receiveLst()
    },
    //点击导出列表
    async exportList(){
      let [th, filekey, data, fileName] = [[], [], [], ""];
      let excelData = JSON.parse(JSON.stringify(this.tableFrom));
      excelData.page = 1;
      excelData.product_id= this.$route.query.product_id || "";
      for (let i = 0; i < excelData.page + 1; i++) {
        let lebData = await this.storeRecharcard(excelData);
        if (!fileName) fileName = lebData.filename;
        if (!filekey.length) {
          filekey = lebData.filekey;
        }
        if (!th.length) th = lebData.header;
        if (lebData.export.length) {
          data = data.concat(lebData.export);
          excelData.page++;
        }
      }
      exportExcel(th, filekey, fileName, data);
    },
    storeRecharcard(excelData){
      return new Promise((resolve, reject) => {
        storeRecharcardReceive(excelData).then((res) => {
          return resolve(res.data);
        });
      });
    },
    receiveLst(){
      receiveLst(this.tableFrom).then(res=>{

        this.tableList = res.data.list
        this.tableList.forEach(item=>{
          item.end_use_time = this.getNowTime(item.end_use_time * 1000)
          item.start_use_time = this.getNowTime(item.start_use_time * 1000)
          item.receive_time = this.getNowTime(item.receive_time * 1000)
        })
        this.total = res.data.count
      })
    },
    // 表格搜索
    userSearchs() {
      this.tableFrom.page = 1;
      this.createList();
    },
    pageChange(index) {
      this.tableFrom.page = index;
      this.receiveLst();
    },
    //补零
    fillZero (str) {
      var realNum;
      if (str < 10) {
        realNum = '0' + str;
      } else {
        realNum = str;
      }
      return realNum;
    },
    getNowTime(time) {
      let now = new Date(time);
      let year = now.getFullYear(); //获取完整的年份(4位,1970-????)
      let month = now.getMonth() + 1; //获取当前月份(0-11,0代表1月)
      let today = now.getDate(); //获取当前日(1-31)
      let hour = now.getHours(); //获取当前小时数(0-23)
      let minute = now.getMinutes(); //获取当前分钟数(0-59)
      let second = now.getSeconds(); //获取当前秒数(0-59)
      let nowTime = ''
      nowTime = year + '/' + this.fillZero(month) + '/' + this.fillZero(today) + ' ' + this.fillZero(hour) + ':' +
          this.fillZero(minute) + ':' + this.fillZero(second)
      return nowTime
    },
  }
}
</script>


<style scoped lang="stylus">
.fa {
  color: #0a6aa1;
  display: block;
}

.sheng {
  color: #ff0000;
  display: block;
}

.tabBox_img {
  width: 36px;
  height: 36px;
  border-radius: 4px;
  cursor: pointer;
}
img {
  width: 100%;
  height: 100%;
}

</style>
